Day 24 網站效能檢查（Lighthouse）+ 改善

2025 iThome 鐵人賽

DAY 24

自我挑戰組

17th鐵人賽線上作品集 lighthouse

40 瀏覽

可以在正式上線的網頁中，按 F12 > Lighthouse，讓他對網頁進行效能檢查。檢查結果會有以下分類：

First Contentful Paint（首次顯示內容所需時間）：瀏覽器算繪第一個 DOM 內容所需的時間，ex: 字型載入時間
Time Blocking Time（總封鎖時間）：網頁無法回應使用者輸入內容 (例如滑鼠點擊、螢幕輕觸或按下鍵盤按鍵) 的總時間
Speed Index（速度指數）：評估網頁載入期間，內容可視化顯示的速度
Largest Contentful Paint（最大內容繪製）：可視區域中最大內容元素算繪至螢幕的時間
Cumulative Layout Shift（累計版面配置位移）：針對網頁整個生命週期發生的每一次非預期版面配置位移，評估最快速密集的版面配置位移分數

⇒ 在 <NuxtImg> 加上 loading="lazy” ， format="webp"
⇒ 要把字型換成 SVG，請改成mdi-svg，並移除字型 CSS

自訂控制項具有 ARIA 角色：舉例來說，自訂核取方塊需要 role="checkbox" 和 aria-checked="true|false"，才能正確傳達其狀態。
對比色問題
<html> element does not have a [lang] attribute

⇒ CIS 顏色對比調整
⇒ 更新 nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
app: {
	head: {
		htmlAttrs: {
			lang: 'zh-Hant'  // 👈 這裡指定語言
		}
	}
})

參考文件：https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=zh-tw

優化後的結果，當然還可以更好，繼續優化！

系列文

1 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

立即登入留言